﻿<script setup lang="ts" name="Download">
import useScrollPosition from '@/hooks/scrollPosition'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
import {
  downloadByUrl,
  downloadByData,
  downloadByBase64,
  downloadByOnlineUrl
} from '@/utils/file/download'
import imageBase64 from './imageBase64'
const route = useRoute()

const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)

// 滚动行为
useScrollPosition(route)

const handleDownloadByData = () => {
  downloadByData('我是测试文本数据', '测试文件.txt')
}
const handleDownloadByUrl = () => {
  downloadByUrl({ url: '../../public/doc/01环境及项目初始化.md', target: '_self', fileName: 'markdown文档.md' })
}
const handleDownloadByBase64 = () => {
  downloadByBase64(imageBase64, 'logo.png')
}
const handleDownloadByOnlineUrl = () => {
  downloadByOnlineUrl('https://gitee.com/ctokevin/vue-admin-system/blob/main/public/doc/images/theme1.jpg', 'theme1.jpg')
}
</script>

<template>
  <el-space :size="systemConfig.space" fill direction="vertical">
    <el-card shadow="never" class="no-border no-radius">
      <el-alert title="根据后台接口返回数据下载" type="success" :closable="false" />
      <el-button type="primary" @click="handleDownloadByData">文件流下载</el-button>
      <el-alert title="根据文件地址下载" type="success" :closable="false" />
      <el-button type="primary" @click="handleDownloadByUrl">文件地址下载</el-button>
      <el-alert title="base64下载" type="success" :closable="false" />
      <el-button type="primary" @click="handleDownloadByBase64">base64下载</el-button>
      <el-alert title="图片地址下载(存在跨域问题)" type="success" :closable="false" />
      <el-button type="primary" @click="handleDownloadByOnlineUrl">图片地址下载</el-button>
    </el-card>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.no-border {
  border: none;
}

.no-radius {
  border-radius: 0;
}

.el-card {
  display: flex;

  :deep(.el-card__body) {
    display: flex;
    flex: 1;
    flex-direction: column;

    .el-button {
      margin-bottom: 20px;
    }
  }
}

.el-alert {
  margin-bottom: 20px;
}
</style>
